<template>
	<view>
		<view class="scroll-view-container">
		
			<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
				<block v-for="(item2,i2) in typeList" :key="i2">
          <view class="study-item" @click.native="toLearnVideo(item2.id)">
            <view class="study_image">
              <!-- <image class="bgImage" :src="bgImageSrc"></image> -->
			    <image class="bgImage" :src="item2.imageSrc"></image>
            </view>
            <view class="study_body">
              <view class="study_title">{{item2.name}}</view>
              <view class="study_progress">已学:{{item2.isFinishTotal}}/{{item2.topicTotal}}</view>
              <view class="study_line">
                <u-line-progress 
                :percentage="percentageComputed(item2.isFinishTotal,item2.topicTotal)" 
                height="4" activeColor=" rgba(72, 118, 255, 1)" 
                :showText="false"></u-line-progress>
              </view>
            </view>
            <view class="study_finished" v-if="item2.isFinishTotal>=item2.topicTotal">
              已完成
            </view>
            <view class="study_not_finished" v-if="item2.isFinishTotal<item2.topicTotal">
              未完成
            </view>
          </view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
			this.getTypeList()
		},

		data() {
			return {
        bgImageSrc: `${this.$baseUrl}/image/download?name=bgMsg.jpg`,
				wh: 0,
				active: 0,
				// 分类数据列表
				typeList: [],
        // 学习资源类型
				learnResource: []
			};
		},
		methods: {
      percentageComputed(a,b){
        let value = a/b
        return value.toFixed(2)*100
      },
			async toLearnVideo(id) {
        // console.log(id)
				uni.navigateTo({
					url: '/package_study/learnVideo/learnVideo?id=' + id,
				})
			},
	
			async getTypeList() {
         const user = uni.getStorageSync("user");
				uni.request({
					url: `${this.$baseUrl}/learning/queryTypeByUid/${user.openid}`,
					method: 'GET',
					success: (res) => {
						console.log(res)
						this.typeList = res.data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
  body{
    background: rgba(245, 245, 245, 1);
  }
  .study-item{
    display: flex;
    .study_not_finished{
      margin-left: 90rpx;
      margin-top: 40rpx;
      /** 文本1 */
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 33.6px;
      color: white;
      text-align: left;
      vertical-align: top;
      width: 104rpx;
      height: 48rpx;
      opacity: 1;
      border-radius: 8rpx;
      background: rgba(153, 153, 153, 1);
      line-height: 48rpx;
      text-align: center;
    }
    .study_finished{
      margin-left: 90rpx;
      margin-top: 40rpx;
      /** 文本1 */
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 33.6px;
      color: white;
      text-align: left;
      vertical-align: top;
      width: 104rpx;
      height: 48rpx;
      opacity: 1;
      border-radius: 8rpx;
      background: rgba(87, 129, 253, 1);
      line-height: 48rpx;
      text-align: center;
    }
    
    .study_body{
      .study_line{
        margin-top: 8rpx;
      }
      .study_progress{
        // width: 74rpx;
        // height: 28rpx;
        // opacity: 1;
        // margin-top: 40rpx;
        // margin-left: ;
        margin-top: 40rpx;
        /** 文本1 */
        font-size: 20rpx;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 28rpx;
        color: rgba(153, 153, 153, 1);
        text-align: left;
        vertical-align: top;
      }
      .study_title{
        min-width: 296rpx;
        height: 40rpx;
        // overflow: hidden;
        opacity: 1;
        font-size: 28rpx;
        font-weight: 600;
        letter-spacing: 0px;
        line-height: 39.2rpx;
        color: rgba(51, 51, 51, 1);
        text-align: left;
        vertical-align: top;
      }
    
      
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      margin-top: 32rpx;
      width: 200rpx;
      height: 50rpx;
      // border: 1px solid black;
    }
    .study_image{
      .bgImage{
       width: 220rpx;
       height: 140rpx;
       opacity: 1;
       border-radius: 8rpx;
        margin-top: 24rpx;
        margin-left: 24rpx;
        // border: 1px solid black;
      }
    }
    width: 686rpx;
    height: 188rpx;
    opacity: 1;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 8rpx 24rpx 0px rgba(23, 42, 99, 0.1);
    margin-left: 32rpx;
    margin-top: 32rpx;
  }
	.learn-resource-item {
		height: 80rpx;
		border: 1px solid grey;
		// background-color: skyblue;
		text-align: center;
		// float: right;
		width: 80%;
		margin: 40rpx;
		line-height: 80rpx;
		box-shadow: skyblue 5rpx 5rpx 0 0;
		border-radius: 0 40rpx 40rpx 0;
    padding: 10rpx;
    position: relative;
    .finish-icon{
    width: 50rpx;
    height: 50rpx;
    // background-color: #53c21d;
    position: absolute;
    top: 10rpx;
    right: 10rpx; 
    }
    .finish-count{
      float: left;
    }
	}

	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 240rpx;

			.left-scroll-view-item {
				line-height: 120rpx;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 24rpx;

				// 激活项的样式
				&.active {
					background-color: #ffffff;
					position: relative;

					// 渲染激活项左侧的红色指示边线
					&::before {
						content: ' ';
						display: block;
						width: 6rpx;
						height: 60rpx;
						background-color: #c00000;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
</style>
